<template>
	<div class="boxcss">
		<!-- 导航栏 -->
		<wuNav></wuNav>
		<!-- 光标输入效果 -->
		<div class="hello">
			<div class="container">
				<div class="typed-out">
					欢迎光临
				</div>
			</div>
		</div>
		<div class="bodybox">
			<!-- 左 -->
			<div class="bodybox_left">
				<!-- 公告栏 -->
				<div class="bodybox_left_notice">
					<div class="bodybox_left_notice_title">biu子公告栏</div>
					<div class="bodybox_left_notice_content">biubiu呼噜啊吧啊吧</div>
				</div>
				<!--  -->
			</div>
			<!-- 右 -->
			<view class="bodybox_rightbox">
				<div class="bodybox_rightbox_data">
					<el-image class="icon date" src="/src/assets/images/index/date.png" fit="contain"></el-image>
					2024年11月6号 | <el-image class="icon time" src="/src/assets/images/index/time.png"
						fit="contain"></el-image>
					14:00
				</div>
				<div class="bodybox_rightbox_contentbox">
					<div class="bodybox_rightbox_contentbox_title">
						<div class="name">
							<el-image class="avatar" src="/src/assets/images/index/avatar.jpg" fit="contain"></el-image>
							小高
						</div>
						<div class="datetime">一天前</div>
					</div>
					<div class="bodybox_rightbox_contentbox_content">
						天空的雾来的漫不经心
						河水像油画一样安静
						和平鸽慵懒步伐压着韵
						心偷偷的放晴
						祈祷你像英勇的禁卫军
						动也不动的守护爱情
						你在回忆里留下的脚印
						是我爱的风景
						我要送你
						日不落的想念
						寄出代表爱的明信片
						我要送你
						日不落的爱恋
						紧牵着心把世界走遍
						你就是庆典
						你就是晴天
						我的爱未眠
						不落的想念
						飞在你身边
						我的爱未眠
						爱的巴士总是走了又停
						微笑望着广场上人群
						我要把爱全都装进心里
						陪我一起旅行
						我要送你
						日不落的想念
						寄出代表爱的明信片
						我要送你
						日不落的爱恋
						紧牵着心
						把世界走遍
						你就是庆典
						你就是晴天
						我的爱未眠
						不落的想念
						飞在你身边
						我的爱未眠
						祈祷你像英勇的禁卫军
						动也不动的守护爱情
						你在回忆里留下的脚印
						是我爱的风景
						我要送你
						日不落的想念
						寄出代表爱的明信片
						我要送你
						日不落的爱恋
						紧牵着心把世界走遍
						你就是庆典
						你就是晴天
						我的爱未眠
						不落的想念
						飞在你身边
						我的爱未眠
						我要送你
						日不落的想念
						寄出代表爱的明信片
						我要送你
						日不落的爱恋
						紧牵着心把世界走遍
						你就是庆典
						你就是晴天
						我的爱未眠
						不落的想念
						飞在你身边
						我的爱未眠 [7]
					</div>
					<!-- ip -->
					<div class="bodybox_rightbox_contentbox_ip">
						<el-image class="icon time" src="/src/assets/images/index/location.png"
							fit="contain"></el-image>来自山东
					</div>
				</div>
			</view>
		</div>
	</div>
</template>

<script>
	import wuNav from "/src/components/wuNav/index.vue";
	export default {
		components: {
			wuNav
		}, //注册组件
		data() {
			return {
				title: '123'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.boxcss {}

	.icon {
		width: 15px;
		height: 16px;
	}

	.date {
		margin-right: 6px;
	}

	.time {
		margin-left: 6px;
		margin-right: 6px;
	}

	.bodybox {
		// height: 1200px;
		width: 80%;
		margin: 120px auto 0;
		display: flex;
		justify-content: space-between;

		&_left {
			width: 15%;

			&_notice {
				border-radius: 8px;
				min-height: 100px;
				background-image: linear-gradient(-225deg, #E3FDF5, #FFE6FA 100%);

				&_title {
					font-size: 20px;
					line-height: 20px;
					font-weight: bold;
					color: pink;
					padding: 20px 0 0 20px;
				}

				&_content {
					font-size: 16px;
					line-height: 20px;
					font-weight: bold;
					color: black;
					padding: 20px 0 0 20px;
				}


			}

		}

		&_rightbox {
			width: 80%;

			&_data {
				border-radius: 5px 5px 0 0;
				width: max-content;
				display: flex;
				align-items: center;
				padding: 3px 15px;
				font-size: 15px;
				opacity: 0.95;
				background: rgb(calc(145 + (255 - 145) * 0.92), calc(196 + (255 - 196) * 0.92), calc(238 + (255 - 238) * 0.92));
				;
			}

			&_contentbox {
				width: 80%;
				backdrop-filter: blur(1px) brightness(90%);
				background-color: rgba(255, 255, 255, 0.5);
				border-radius: 0 10px 10px 10px;
				// min-width: 350px;

				&_title {
					padding: 20px 0 0 20px;
					display: flex;
					justify-content: space-between;
				}

				.name {
					font-size: 18px;
					line-height: 20px;
					font-weight: bold;
					display: flex;
					align-items: center;
				}

				.avatar {
					width: 36px;
					height: 36px;
					border-radius: 50%;
					margin-right: 6px;
				}

				.datetime {
					font-size: 15px;
					color: rgba(0, 0, 0, .5);
					padding-right: 20px;
				}

				&_content {
					font-size: 1.2rem;
					padding: 10px 0 10px 20px;
				}

				&_ip {
					display: flex;
					align-items: center;
					font-size: 15px;
					line-height: 14px;
					color: rgba(0, 0, 0, .5);
					padding: 10px 0 20px 25px;
				}
			}
		}
	}

	.hello {
		margin: 80px auto 0;
		height: 200px;
		width: 80%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 42px;
	}

	.container {
		display: inline-block;
	}


	.typed-out {
		overflow: hidden;
		border-right: 2px solid #fff;
		padding-right: 2px;
		white-space: nowrap;
		font-size: 42px;
		width: 0;
		animation:
			typing 1s steps(20, end) forwards,
			blink 1s step-end infinite;
	}

	@keyframes typing {
		from {
			width: 0
		}

		to {
			width: 100%
		}
	}

	@keyframes blink {

		from,
		to {
			border-color: transparent
		}

		50% {
			border-color: #fff
		}
	}

	@media only screen and (max-width: 900px) {
		.topbox-left {
			justify-content: center;
		}

		.topbox-left {
			display: none;
			transition: all 0.2s ease-in-out;
		}

		.topbox-right {
			display: none;
			transition: all 0.2s ease-in-out;
		}

		.bodybox_left {
			display: none;
			transition: all 0.2s ease-in-out;
		}

		.bodybox {
			width:100%;
			display: flex;
			margin: 10px auto 0;
			justify-content: center;
		}

		.bodybox_rightbox {
		}

		.bodybox_rightbox_contentbox {
			width: 100%;
			background: red;
			transition: all 0.2s ease-in-out;
		}
	}

	@media only screen and (min-width: 900px) {
		.topbox-center {
			display: none;
		}
	}
</style>